<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>报读年级:</span>
        <select class="select" v-model="gradeSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
        </select>
        <span>类型:</span>
        <select class="select" v-model="subjectSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in subjectOption" :label="item" :value="key"></option>
        </select>
        <div class="middle">
          <el-input type="text" placeholder="请输入学生姓名" class="middle-text" v-model="stuName" size="small"></el-input>
          <el-button type="primary" v-on:click="nameSearch" size="small">搜索</el-button>
          <el-button type="primary" @click="clearGradeSelect" size="small">重置</el-button>
        </div>
        <div class="right-btn">
          <el-button type="primary" size="small">导出</el-button>
          <!-- <el-button type="success" size="small"><router-link to="/signup/stuEntered">新增</router-link></el-button> -->
        </div>
      </div>
    </div>

    <div class="model query">
      <img :src="IMGBASE64.JIAOSHIXINXICHAXUN2X" class="pink">
      <span class="title">学生信息</span>
      <div class="kong"></div>
      <template>
        <el-table :data="tablemsg" style="width: 100%" @cell-click="showDetails">
          <el-table-column prop="id" label="#" align="center"></el-table-column>
          <el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
          <el-table-column prop="studentSex" label="性别" align="center"></el-table-column>
          <el-table-column prop="studentBirthday" label="生日" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="studentIdNo" label="身份证号" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="signGrade" label="报读年级" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="status" label="状态" align="center"></el-table-column>
          <!-- <el-table-column prop="fatherName" label="爸爸姓名" align="center"></el-table-column>
          <el-table-column prop="fatherPhone" label="手机号" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="motherName" label="妈妈姓名" align="center"></el-table-column>
          <el-table-column prop="motherPhone" label="手机号" align="center" :show-overflow-tooltip='true'></el-table-column> -->
          <el-table-column prop="studentSignupTpye" label="操作" align="center">
            <template scope="scope">
              <el-button type="text" size="small">录取</el-button>
              <el-button type="text" size="small">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
      </template>
    </div>

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="close" class="close" @click="detailsShow()"></el-button>
      <div class="body">
        <el-form label-width="80px">
          <el-col :span="24">
            <el-form-item label="姓名">
              <span>{{detailsForm.studentName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <span>{{detailsForm.studentSex}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日">
              <span>{{detailsForm.studentBirthday}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <span>{{detailsForm.studentIdNo}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报读年级">
              <span>{{detailsForm.signGrade}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="爸爸姓名">
              <span>{{detailsForm.fatherName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <span>{{detailsForm.fatherPhone}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="妈妈姓名">
              <span>{{detailsForm.motherName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <span>{{detailsForm.motherPhone}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isDetails"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      stuName: null,
      teacherData: [],
      gradeSelect: null,
      gradeOption: [],
      subjectSelect: null,
      subjectOption: [],
      isDetails: false,
      total: 0,
      page: 1,
      paging: true,
      detailsForm: {
        studentName: null,
        studentSex: null,
        studentBirthday: null,
        studentIdNo: null,
        signGrade: null,
        fatherName: null,
        fatherPhone: null,
        motherName: null,
        motherPhone: null
      },
      tablemsg: [
        {
          id: '1',
          name: '欧阳俊逸',
          sex: '男',
          brithday: '2010/02/23',
          IDcardNum: '44013401234021340234',
          grade: '一年级',
          fatherName: '欧阳爸爸',
          fatherPhone: '123123123',
          momName: '欧阳妈妈',
          momPhone: '123123123123',
          type: '新生'
        },
        {
          id: '2',
          name: '欧阳俊逸',
          sex: '男',
          brithday: '2010/02/23',
          IDcardNum: '44013401234021340234',
          grade: '一年级',
          fatherName: '欧阳爸爸',
          fatherPhone: '123123123',
          momName: '欧阳妈妈',
          momPhone: '123123123123',
          type: '插班生'
        },
        {
          id: '3',
          name: '欧阳俊逸',
          sex: '男',
          brithday: '2010/02/23',
          IDcardNum: '44013401234021340234',
          grade: '一年级',
          fatherName: '欧阳爸爸',
          fatherPhone: '123123123',
          momName: '欧阳妈妈',
          momPhone: '123123123123',
          type: '国际班'
        }]
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.nameSearch()
    },
    clearGradeSelect () {
      this.gradeSelect = null
      this.subjectSelect = null
      this.stuName = null
    },
    nameSearch () {
      this.xtoken = {'yxt-xtoken': localStorage.xtoken}
      this.$http.post(this._httpUrl + 'signup/studentMsg/query', {
        studentName: this.stuName,
        signGrade: this.gradeSelect,
        signUpType: this.subjectSelect
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          // console.log(response.data.data)
          this.tablemsg = response.data.data.rows
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    detailsShow () {
      this.isDetails = !this.isDetails
    },
    showDetails (rows, column) {
      if (column.label !== '操作') {
        this.detailsForm.studentName = rows.studentName
        this.detailsForm.studentSex = rows.studentSex
        this.detailsForm.studentBirthday = rows.studentBirthday
        this.detailsForm.studentIdNo = rows.studentIdNo
        this.detailsForm.signGrade = rows.signGrade
        this.detailsForm.fatherName = rows.fatherName
        this.detailsForm.fatherPhone = rows.fatherPhone
        this.detailsForm.motherName = rows.motherName
        this.detailsForm.motherPhone = rows.motherPhone
        this.isDetails = !this.isDetails
        this.isSuccess = !this.isSuccess
      }
    }
  },
  mounted () {
    this.xtoken = {'yxt-xtoken': localStorage.xtoken}
    this.$http.post(this._httpUrl + 'signup/student/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        // console.log(response.data.data)
        this.tablemsg = response.data.data.rows
        // this.subjectOption = response.data.data.rows.
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
    this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        // console.log(response.data.data)
        this.gradeOption = response.data.data.gradeMap
      } else {
        this.$route.push('/login')
      }
    })
    this.$http.post(this._httpUrl + 'signup/studentMsg/type', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        this.subjectOption = response.data.data
        console.log(this.subjectOption)
      } else {
        this.$route.push('/login')
      }
    })
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
        margin-left: 4%;
      }
      span:first-child{
        margin-left: 0;
      }
    }
    .select{
      width: 13%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
    }
    .middle{
      width: 36%;
      display: inline-block;
      margin-left: 4%;
      &-text{
        width: 50%;
      }
    }
    .right-btn{
      float: right;
      margin-right: 2%;
      a
      {
        text-decoration: none;
        color: white;
      }
    }
  }
</style>
